<template>
    <div>
        <img :src="logo1" alt="" style="z-index: 10000; margin-top:10px; width: 80px; margin-left: 20px">
        <form>
            <div class='region'>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;请选择地区：</span>
                <el-select v-model="value" placeholder="地区" @change="changeCenter">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :centerValue1="item.centerValue1"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class='block'>
                <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;入住时间：</span>
                <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-input class='input' v-model="input" placeholder="请输入酒店名称"></el-input>
            <el-button type="primary" style="margin-left: 1530px;position:fixed;top: 0;margin-top: 10px" @click="submitHotel">搜索</el-button>
            <div class="center">
                <i class="el-icon-user-solid"></i>
                <el-link href="http://localhost:3000/#/main/usercenter/userdetali" @click="toCenter">个人中心</el-link>
                <i class="el-icon-s-claim"></i>
                <el-link href="http://localhost:3000/#/main/usercenter/order" @click="toOrder">我的订单</el-link>
            </div>
        </form>

        <div class="mapbox">

            <baidu-map
                    class="map"
                    @ready="handler"
                    :center="centerValue"
                    :map-click="false"
                    :zoom="zoomValue">
                <!--//显示城市地图-->
                <!--<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
                <bml-marker-clusterer :averageCenter="true">
                    <div
                            v-for="(marker, i) of markers"
                            :key="i">
                        <bm-marker
                                :dragging="false"
                                animation="BMAP_POINT_SHAPE_STAR"
                                :position="{lng: marker.lng, lat: marker.lat}"
                                @click="infoWindowOpen(marker)"
                        >
                            <bm-info-window
                                    title="酒店名称"
                                    :position="{lng: marker.lng, lat: marker.lat}"
                                    :show="marker.showFlag"
                                    @close="infoWindowClose(marker)"
                                    @open="infoWindowOpen(marker)"
                            >

                                <h @click="changeList(marker.showName)">{{marker.showName}}</h>
                            </bm-info-window>
                        </bm-marker>
                    </div>
                </bml-marker-clusterer>
            </baidu-map>
        </div>
        <el-container>
            <el-main>
                <el-table :data="hotels" class="catalogue">
                    <el-table-column label="酒店" src="photo1" width="150">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="" trigger="hover">
                                <img :src="scope.row.photo1" alt="" style="width: 200px;height: 130px" >
                                <img slot="reference" :src="scope.row.photo1" style="width: 150px;height: 90px" @click="toDetail(scope.row)">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="详情" width="110"
                                     style="margin-top: 0px; margin-left: 10px; float: left" >
                    </el-table-column>
                    <el-table-column prop="name" label="" width="70">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-location-information"
                                       style="font-size:15px; border:#FFFFFF; float: left"
                                       @click="changePosition(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import {hotelPoint, selectByName} from '@api/hotel'
import logo from '../../assets/image/logo.png'
export default {
  name: 'testMap',
  data: () => ({
    BMap: '',
    map: '',
    logo1: logo,
    // carList,
    show: false,
    markers: [],
    options: [
      {
        value: '选项1',
        label: '锦江区',
        centerValue1: {
          lng: '104.08',
          lat: '30.67'
        }
      }, {
        value: '选项2',
        label: '青羊区',
        centerValue1: {
          lng: '104.05',
          lat: '30.683333333333334'
        }
      }, {
        value: '选项3',
        label: '金牛区',
        centerValue1: {
          lng: '104.32',
          lat: '30.29'
        }
      }, {
        value: '选项4',
        label: '武侯区',
        centerValue1: {
          lng: '104.019166667',
          lat: '30.6194444444'
        }
      }, {
        value: '选项5',
        label: '成华区',
        centerValue1: {
          lng: '103.966666667',
          lat: '30.6416666667'
        }
      }, {
        value: '选项6',
        label: '龙泉驿区',
        centerValue1: {
          lng: '104.295555556',
          lat: '30.59375'
        }
      }, {
        value: '选项7',
        label: '青白江区',
        centerValue1: {
          lng: '104.326111111',
          lat: '30.7879166667'
        }
      }, {
        value: '选项8',
        label: '新都区',
        centerValue1: {
          lng: '104.091111111',
          lat: '30.8219444444'
        }
      }, {
        value: '选项9',
        label: '温江区',
        centerValue1: {
          lng: '103.8',
          lat: '30.7333333333'
        }
      }, {
        value: '选项10',
        label: '双流区',
        centerValue1: {
          lng: '104.016666667',
          lat: '30.4416666667'
        }
      }, {
        value: '选项11',
        label: '郫都区',
        centerValue1: {
          lng: '103.866666667',
          lat: '30.7916666667'
        }
      }, {
        value: '选项12',
        label: '新津区',
        centerValue1: {
          lng: '103.82',
          lat: '30.42'
        }
      }],
    queryName: '',
    value: '', // 地区
    pickerOptions: {
      shortcuts: [{
        text: '最近一周',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    },
    value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    value2: '',
    input: '', // 搜索
    points: [],
    point1: [[]],
    nameT: '',
    lngT: '',
    latT: '',
    hotels: [],
    address: '',
    urlT: '',
    pag: 1,
    showList: [],
    centerValue: {
      lng: '104.07231',
      lat: '30.663467'
    },
    centerValue1: {
      lng: '',
      lat: ''
    },
    zoomValue: 15
  }),
  methods: {
    toDetail (s) {
      const id = s.id
      this.$router.push({
        path: '/detail',
        query: {h_id: id}
      })
      console.log(s)
      console.log(id)
    },
    toCenter () {
      this.$router.push('/main/usercenter/order')
    },
    toOrder () {
      this.$router.push('/order')
    },
    submitHotel () {
      selectByName(this.input).then(res => {
        this.hotels = res.data
        console.log(this.hotels)
      })
    },
    showHotel () {
      hotelPoint().then(res => {
        this.hotels = res.data
        console.log(this.hotels)
      })
    },
    hotelPoint () {
      hotelPoint().then(res => {
        // console.log(res.data)
        for (let i = 0; i < res.data.length; i++) {
          const position = {
            lng: res.data[i].longitude,
            lat: res.data[i].latitude,
            showFlag: false,
            showName: res.data[i].name
          }
          this.markers.push(position)
        }
        // console.info(this.markers)
      })
    },

    handler ({BMap, map}) {
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青岛市', 13)
      // 赋值，方便调用，本节没用到
      this.BMap = BMap
      this.map = map
    },
    // 关闭信息窗口 @close 自带的方法
    infoWindowClose (marker) {
      marker.showFlag = false
      console.log(marker)
    },
    // 首先点击marker时开启信息窗口，其实没必要在 bm-info-window 上写 @open 因为如果是关闭状态根本就点不到，所以就无法触发 @open
    // 如果在 bm-info-window 上写了 @open 在点击marker时会触发两次infoWindowOpen函数，而且可以很明显的看到有延时
    infoWindowOpen (marker) {
      marker.showFlag = true
      // console.log(marker)
    },
    changePosition (obj) {
      this.centerValue.lat = obj.latitude
      this.centerValue.lng = obj.longitude
      this.zoomValue = 40
    },
    changeList (name) {
    },
    changeCenter () {
      console.log(this.value)
      // console.log(this.centerValue1)
      this.options.forEach((item) => {
        if (item.value === this.value) {
          this.centerValue = item.centerValue1
          this.zoomValue = 15
        }
      })
    }

  },

  created () {
    // this.pointTest()
    this.hotelPoint()
    this.showHotel()
  }
}

</script>

<style scoped>
    .map {
        /*margin-left: auto;*/
        width: 80%;
        height: 900px;
        float: right;
    }

    .region {
        margin-left: 370px;
        margin-top: 10px;
    }

    .block {
        margin-left: 700px;
        position: fixed;
        top: 0;
        margin-top: 10px;
    }

    .input {
        margin-left: 1250px;
        width: 250px;
        position: fixed;
        top: 0;
        margin-top: 10px;
    }

    .center {
        margin-right: 20px;
        margin-left: 1670px;
        font-size: 30px;
        position: fixed;
        top: 0;
        margin-top: 10px;
    }

    .paging {
        margin-bottom: 20px;
        margin-left: 30px;
        float: bottom;
        bottom: 10px;
        z-index: 120;
        position: fixed;
    }

    .catalogue {
        height: 860px;
        width: 520px;
        overflow: visible;
    }
</style>
